import React, { Component } from 'react';
import { PlusOutlined, RestOutlined } from '@ant-design/icons'
import PropTypes from 'prop-types'
import ModalLay from '@/components/ModalLay'
import UploadFile from '@/components/UploadFile/UploadFile'
import './ImageCard.scss'
class ImageCard extends Component {
    constructor(props) {
        super(props);
        this.state = {
            imageList: [],//选择的图片
            isChoose: false,//控制自身模态框
        };
    }
    //选择图片
    chooseImage = () => {
        //控制模态框
        this.setState({ isChoose: true });
    }
    //移除图片
    removeHandler = (index) => {
        let { imageList } = this.state;
        imageList.splice(index, 1)
        this.setState({ imageList });
    }
    //关闭模态框
    closeModal = (arr) => {
        this.setState({ isChoose: false, imageList: arr });
        //选择图片传给父级
        this.props.onChooseImage(arr?.length === 1 ? arr.join('') : arr);
    }
    render() {
        let { sTitle, imageType } = this.props;
        let { imageList, isChoose } = this.state;
        return (
            <>
                {
                    imageList && imageList.map((item, index) => {
                        return (
                            <div key={index} className='ImageList'>
                                <img src={item} alt="" />
                                <span className='remove' onClick={this.removeHandler.bind(this, index)}>
                                    <RestOutlined />
                                </span>
                            </div>
                        )
                    })
                }
                <div className='ImageCard' onClick={this.chooseImage}>
                    <PlusOutlined />
                </div>
                <span className='stitle'>{sTitle}</span>
                {/* 素材模态框 */}
                <ModalLay width={'70%'} title='选择资源' footer={null} isModalOpen={isChoose} onCloseModal={this.closeModal} >
                    {/* 素材组件 */}
                    <UploadFile num={imageType} onGive={this.closeModal}></UploadFile>
                </ModalLay>
            </>
        );
    }
}
ImageCard.propTypes = {
    imageType: PropTypes.number,
    sTitle: PropTypes.string,
    list: PropTypes.array,
    onChooseImage: PropTypes.func
}
ImageCard.defaultProps = {
    imageType: 1,
    sTitle: "建议尺寸64*64",
    list: []
}
export default ImageCard;